<template>
  <base-breadcrumb :title="$route.meta.title">
    <searchData :search-data="searchOption2" @search="search" />
    <a-card :bordered="false">
        <list-table
            :defaultLoad="false"
            ref="table"
            :page-keys="['pageNum', 'pageSize','total']"
            size="default"
            rowKey="id"
            :columns="columns1"
            :request="loadData"
            :showPage="false">
            <span slot="serial" slot-scope="text, record, index">{{ index + 1 }}</span>
            <template slot="frontTask" slot-scope="text, record">
                <div
                    v-if="item.dataIndex === 'frontTask'"
                    class="front-task"
                    @mouseenter="handleCellMouseEnter($event,row)"
                >
                    <span>{{ row[item.dataIndex] }}</span>
                    <ul
                    class="front-task-info"
                    :style="{'top': row.top + 'px'}"
                    >
                    <li
                        v-for="item in row.frontDetailList"
                        :key="item.id"
                        @click="handleNode(item)"
                    >
                        <b>前置节点：{{ item.frontTask }}</b>
                        <article>
                            <p>{{ item.type }}</p>
                            <section>
                                <span>{{ item.period }}天</span>
                                <span>{{ item.planStartTime }}-{{ item.planEndTime }}</span>
                            </section>
                            <section>
                                <i :class="color[item.statusLights]"></i>
                                <span>{{ item.desc }}</span>
                            </section>
                        </article>
                    </li>
                    </ul>
                </div>
            </template>
            <template  v-for="item in ['isKeyNode','isMilestonesNode','isMainProcessNode','isVerticalTransportNode']" :slot="item" slot-scope="text, record, index">
              <a-switch 
                :key="item"
                v-model="record[item.dataIndex]"
                checked-children="是"
                un-checked-children="否"
                disabled
              />
            </template>
            <!-- <template slot="action" slot-scope="text, record">
                <MoreButton >
                    <a @click="handleApproveDetail(row)"
                    >审批信息</a>
                </MoreButton>
            </template> -->
        </list-table>
    </a-card>
    <div class="tool-btns page-btn-right-top">
        <!-- <a-button class="ml20" type="primary" @click="()=>this.$router.push('/project/projectPlanningAssessment/monthlySummary')"> 关闭 </a-button> -->
        <a-button class="ml20" type="primary" @click="$close()"> 关闭 </a-button>
    </div>
    <NodeStart
      :visible.sync="nodeStartVisible"
      :data="data"
      :api-code="0"
      @refresh="refreshLoadData"
    />
    <!-- 节点开始 -->
    <!-- 节点完成 -->
    <NodeMaintain
      :visible.sync="nodeMaintainVisible"
      :data="data"
      :api-code="apiCode"
      @refresh="refreshLoadData"
    />
    <ApprovalDetail
      :title="'审批信息'"
      :business-id="businessId"
      :visible="visibleApprove"
      @cancel="visibleApprove = false"
      @confirm="visibleApprove = false"
    />
  </base-breadcrumb>
</template>

<script>

import { searchOption2, columns1, columns2 } from './model.js'
import { planExamineMonthCommonGetNodeInfoList } from '@/api/project/projectPlanningAssessment'
import NodeMaintain from '@/views/construction/constructionSchedule/components/NodeMaintain'
import NodeStart from '@/views/construction/constructionSchedule/components/NodeStart'
import ApprovalDetail from '@/views/construction/constructionSchedule/components/ApprovalDetail'
export default {
  name: 'dataDetails',
  components: {
    NodeMaintain,
    NodeStart,
    ApprovalDetail
  },
  data() {
    return {
      searchOption2,
      columns1,
      queryParam: {},
      businessId: '',
      visibleApprove: false,
      // 节点开始显示隐藏
      nodeStartVisible: false,
      // 节点完成显示隐藏
      nodeMaintainVisible: false,
      // 接口代码(只有施工进度总计划的情况)
      apiCode: 0,
      // 节点完数据
      data: {},
      queryInfo: this.$route.query,
      projectIds: [],
      loadData: (parameter) => {
        if(this.queryInfo.tageCode === 'BC') this.queryParam.examineMonth = this.queryInfo.examineMonth
        if(this.queryInfo.tageCode === 'PD') this.queryParam.examineYear = this.queryInfo.examineYear
        return planExamineMonthCommonGetNodeInfoList({
            ...this.queryParam, 
            projectIds: this.projectIds,
            type: this.queryInfo.type,
          }
        ).then((res) => {
          return {code: 200, data: res.data, ...res }
        }).catch((err) => {
          return {
            code: 500,
            err
          }
        })
      },
    }
  },
  computed: {
    
  },
  created() {
    let projectIds = sessionStorage.getItem('projectIds')
    this.projectIds = projectIds ? JSON.parse(projectIds) : []
    if(this.queryInfo.tageCode === 'BC') {
      this.columns1.splice(1, 0, columns2[0])
    } 
  },
  methods: {
    search(e) {
      let param = this.$clone(e)
      this.queryParam = {
        ...param
      }
      this.$refs.table.refresh(true)
    },
    refreshLoadData() {
        this.$refs.table.refresh(true)
    },
    handleApproveDetail(row){
      this.visibleApprove = true
      this.businessId = row.id
    },
    handleCellMouseEnter(e, row) {
      let height = this.clientHeight - (e.clientY - e.offsetY + 280)
      for (let i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].id === row.id) {
          if (height < 0) {
            this.tableData[i].top =  height - 60
          } else {
            this.tableData[i].top = 0
          }
          break
        }
      }
      this.$refs.table.reloadData(this.tableData)
    },
    handleNode(row) {
      if (row.maintainButton === 0) {
        // 节点开始
        this.handleNodeStart(row, 'update')
      } else {
        // 节点完成
        this.handleNodeMaintain(row, 'update')
      }
    },
    handleNodeStart({ id, nodeStatusCode }, type) {
      this.nodeStartVisible = true
      this.data = {
        id,
        nodeStatus: nodeStatusCode,
        isIndividual: 1,
        type
      }
    },
    /**
     * @description: 节点完成
     * @param {object} row 行数据
     * @param {string} type 按钮类型
     * @return {void}
     */
    handleNodeMaintain({ id, nodeStatusCode }, type) {
      this.nodeMaintainVisible = true
      this.data = {
        id,
        nodeStatus: nodeStatusCode,
        isIndividual: 1,
        type
      }
    },
  }
}
</script>

<style lang="less" scoped>
  .totalNum {
    cursor: pointer;
  }
  .front-task {
  > span {
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    white-space: nowrap;
    display: block;
  }
  &:hover {
    .front-task-info {
      display: block;
    }
  }
}
.front-task-info {
  position: absolute;
  width: 490px;
  height: 260px;
  z-index: 1;
  right: -480px;
  display: none;
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 20px;
  background-color: #fff;
  padding: 20px;
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0;
  &::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    width: 8px;
    border-radius: 8px;
    background: #ccc;
  }
  li {
    text-align: left;
    margin-bottom: 10px;
    cursor: pointer;
    b {
      font-weight: normal;
    }
    article {
      border: 1px solid #e8e8e8;
      border-radius: 4px;
      padding: 1em;
      margin-top: 1em;
      white-space: normal;
      p {
        margin: 0;
      }
      section {
        margin-top: 5px;
        display: flex;
        align-items: center;
        span {
          margin-left: 10px;
        }
        span:nth-of-type(1) {
          margin-left: 0;
        }
        i {
          display: inline-block;
          width: 24px;
          height: 14px;
          margin-right: 10px;
        }
      }
    }
  }
}
</style>
